<template>
  <div>
    <!-- {{ gridOptions.data }} -->
    <button @click="clickMe">刷新事件</button>

    <input type="text" v-model="text" />
    <BaseVxeGrid
      :gridOptions="gridOptions"
      :columnStyles="columnStyles"
      :gridEvents="gridEvents"
      v-on="gridEvents"
      :loading="loading"
    >
      <template #action="{ row }">
        <button>clickMe_{{ row.special_msg }}</button>
      </template>
    </BaseVxeGrid>
  </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import type { VxeGridListeners, VxeGridProps } from 'vxe-table'
import BaseVxeGrid from '../components/BaseVxeGrid.vue'
import type { IColumnStyles } from '@/components/BaseVxeType'

interface RowVO {
  storage: string
  drug_code: string
  drug_spec: string
  drug_id: string
  spec_alias: string
  drug_name: string
  trade_name: string
  factory: string
  factory_alias: string
  drug_units: string
  dose_per_unit: number
  dose_units: string
  drug_form: string
  retail_price: number
  input_code: string
  refrigerated_drug: string
  reposit_type: string
  deploy_type: string
  pack_first_day: string
  dispensing_property: string
  special_class: string
  drug_class: string
  drug_catalog: string
  risk_drug: string
  valuable_drug: string
  tumble_drug: string
  with_bag: string
  ignore_diff: string
  tcm_drug: string
  ppi: string
  toxi_catalog: string
  pack_type: string
  glass_pack: string
  expire_hour: string
  equivalent_volume: string
  equivalent_weight: string
  content_weight: string
  package_weight: string
  skin_test: string
  drip_limit: string
  bump_limit: string
  base_score: string
  mix_score: string
  order_rank: string
  location: string
  stock_pose: string
  use_remark: string
  special_msg: string
  manage_catalog: string
  separate: string
  minor_drug: string
  mix_whole_day: string
  detail_order: string
  batch_no: string
  dispatch_type: string
  stick_type: string
  must_plan: string
  purchase_indicator: string
  supply_indicator: string
  quantity: number
  use_prompt: string
  prepare_type: string
  remark: string
  union_type: string
  ph_value: string
  min_consistency: string
  max_consistency: string
  permit_routes: string
  forbid_routes: string
  min_use_age: string
  max_use_age: string
  max_day_count: string
  max_day_dosage: string
  specification_dosage: string
  min_volume: string
  max_volume: string
  permit_diagnosis: string
  forbid_diagnosis: string
  min_weight_dosage: string
  max_weight_dosage: string
  min_height_dosage: string
  max_height_dosage: string
  min_volume_dosage: string
  max_volume_dosage: string
  max_solvent: string
  min_solvent: string
  min_drip: string
  max_drip: string
  min_bump_volume: string
  max_bump_volume: string
  permit_frequency: string
  forbid_frequency: string
  affix_volume: string
  decision_index: string
  drug_attach: string
  mix_key: string
  dilution_type: string
  dilution_dosage: string
  dilution_total: string
  dilution_consist: string
  dissolve_order: string
  dilution_remark: string
  gs: string
  ct: string
  aa: string
  na: string
  k: string
  mg: string
  ca: string
  p: string
  osmotic: string
  inventory_group: string
  inventory_hint: string
  sustain_indicator: string
  scan_confirm: string
  cautious_drug: string
  pick_group: string
  tpn_order: string
  create_user: string
  create_time: string
  last_update_user: string
  last_update_time: string
  prepare_skip_type: string
  id: number
}

// 列样式设置
const columnStyles: Array<IColumnStyles> = [
  {
    specifyField: 'drug_name',
    judgeField: 'drug_name',
    name: '抗生素',
    value: ['55555修改测试数据'],
    style: {
      backgroundColor: '#ff0000 ',
      color: 'white',
      fontStyle: 'italic',
      fontSize: '14px',
      fontWeight: 'bolder',
    },
  },
  {
    specifyField: 'drug_name',
    judgeField: 'drug_name',
    name: '人工贴签',
    value: ['■◎注射用硫酸长春新碱'],
    style: { backgroundColor: '#00ffff', color: '#ff0000', fontWeight: '900' },
  },
]

// https://vxetable.cn/#/component/grid/checkbox/range 滑动复选框多选
const gridOptions = ref<VxeGridProps<RowVO>>({
  keyboardConfig: {
    isEdit: true,
    isArrow: true,
    isEnter: true,
    isTab: true,
    isDel: true,
    isBack: true,
    isEsc: true,
    editMethod({ $table, row, column }) {
      // https://vxetable.cn/#/component/grid/keyboard/editMethod 第二个 按键编辑表格
      // 清空值
      // if (column.field) {
      //   row[column.field] = ''
      // }
      // 激活编辑状态
      $table.setEditCell(row, column)
    },
  },
  editConfig: {
    trigger: 'dblclick',
    mode: 'cell',
    showStatus: true,
  },
  columns: [
    { type: 'checkbox', fixed: 'left' },
    { minWidth: '100px', title: '序号', type: 'seq', fixed: 'left' },
    {
      minWidth: '100px',
      field: 'drug_name',
      title: '药品名称',
      fixed: 'left',
      sortable: true,
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'drug_spec',
      title: '药品规格',
      fixed: 'left',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'factory',
      title: '生产厂商',
      fixed: 'left',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'storage', title: '库存位置' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'drug_code', title: '药品编码' },
    // { minWidth: '100px', editRender: { name: 'input' }, field: 'drug_id', title: '药品ID' },
    {
      minWidth: '100px',
      // editRender: { name: 'input', attrs: { type: 'checkbox' } },
      field: 'pack_first_day',
      title: '首日打包',
      cellRender: { name: 'VxeSwitch' }, // switch 开关组件
      // cellRender: { name: 'input', attrs: { type: 'checkbox' } }, // checkbox 组件
    },
    {
      minWidth: '100px',
      editRender: {
        name: 'select',
        options: [
          { label: '=请选择=', value: '' },
          { label: '大输液', value: 'dsy' },
          { label: '针剂', value: 'zj' },
        ],
      },
      field: 'dispensing_property',
      title: '摆药类型',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'spec_alias', title: '规格别名' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'factory_alias', title: '厂商别名' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'drug_units', title: '单位' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'dose_per_unit', title: '单位剂量' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'dose_units', title: '剂量单位' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'drug_form', title: '剂型' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'retail_price', title: '零售价' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'input_code', title: '输入码' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'refrigerated_drug',
      title: '冷藏药品',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'reposit_type', title: '贮藏类型' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'deploy_type', title: '配置类型' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'special_class', title: '特殊分类' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'drug_class', title: '药品类别' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'drug_catalog', title: '药品目录' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'risk_drug', title: '高危药品' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'valuable_drug', title: '贵重药品' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'tumble_drug', title: '易混淆药品' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'with_bag', title: '带袋配置' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'ignore_diff', title: '忽略差异' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'tcm_drug', title: '中药药品' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'ppi', title: '质子泵抑制剂' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'toxi_catalog', title: '毒麻目录' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'pack_type', title: '包装类型' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'glass_pack', title: '玻璃包装' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'expire_hour',
      title: '有效期(小时)',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'equivalent_volume',
      title: '等效体积',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'equivalent_weight',
      title: '等效重量',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'content_weight',
      title: '内容物重量',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'package_weight',
      title: '包装重量',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'skin_test', title: '皮试药品' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'drip_limit', title: '输液限制' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'bump_limit', title: '推注限制' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'base_score', title: '基础评分' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'mix_score', title: '混合评分' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'order_rank', title: '排序等级' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'location', title: '存放位置' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'stock_pose', title: '库存姿态' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'use_remark', title: '使用备注' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'special_msg', title: '特殊信息' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'manage_catalog',
      title: '管理目录',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'separate', title: '分开摆放' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'minor_drug', title: '小剂量药品' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'mix_whole_day', title: '全天混合' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'detail_order', title: '明细排序' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'batch_no', title: '批次号' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'dispatch_type', title: '调配类型' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'stick_type', title: '贴签类型' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'must_plan', title: '必须计划' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'purchase_indicator',
      title: '采购指标',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'supply_indicator',
      title: '供应指标',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'quantity', title: '数量' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'use_prompt', title: '使用提示' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'prepare_type', title: '调配类型' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'remark', title: '备注' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'union_type', title: '联合类型' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'ph_value', title: 'PH值' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'min_consistency',
      title: '最小浓度',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'max_consistency',
      title: '最大浓度',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'permit_routes', title: '允许途径' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'forbid_routes', title: '禁止途径' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'min_use_age',
      title: '最小使用年龄',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'max_use_age',
      title: '最大使用年龄',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'max_day_count',
      title: '最大使用天数',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'max_day_dosage',
      title: '最大日剂量',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'specification_dosage',
      title: '规格剂量',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'min_volume', title: '最小体积' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'max_volume', title: '最大体积' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'permit_diagnosis',
      title: '允许诊断',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'forbid_diagnosis',
      title: '禁止诊断',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'min_weight_dosage',
      title: '最小体重剂量',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'max_weight_dosage',
      title: '最大体重剂量',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'min_height_dosage',
      title: '最小身高剂量',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'max_height_dosage',
      title: '最大身高剂量',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'min_volume_dosage',
      title: '最小体积剂量',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'max_volume_dosage',
      title: '最大体积剂量',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'max_solvent', title: '最大溶剂量' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'min_solvent', title: '最小溶剂量' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'min_drip', title: '最小滴速' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'max_drip', title: '最大滴速' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'min_bump_volume',
      title: '最小冲管体积',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'max_bump_volume',
      title: '最大冲管体积',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'permit_frequency',
      title: '允许频次',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'forbid_frequency',
      title: '禁止频次',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'affix_volume', title: '附加体积' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'decision_index',
      title: '决策指标',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'drug_attach', title: '药品附件' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'mix_key', title: '混合关键' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'dilution_type', title: '稀释类型' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'dilution_dosage',
      title: '稀释剂量',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'dilution_total',
      title: '稀释总量',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'dilution_consist',
      title: '稀释浓度',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'dissolve_order',
      title: '溶解顺序',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'dilution_remark',
      title: '稀释备注',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'gs', title: 'GS' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'ct', title: 'CT' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'aa', title: 'AA' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'na', title: '钠' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'k', title: '钾' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'mg', title: '镁' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'ca', title: '钙' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'p', title: '磷' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'osmotic', title: '渗透压' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'inventory_group', title: '库存组' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'inventory_hint',
      title: '库存提示',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'sustain_indicator',
      title: '持续指标',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'scan_confirm', title: '扫码确认' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'cautious_drug', title: '慎用药品' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'pick_group', title: '拣选组' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'tpn_order', title: 'TPN顺序' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'create_user', title: '创建人' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'create_time', title: '创建时间' },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'last_update_user',
      title: '最后更新人',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'last_update_time',
      title: '最后更新时间',
    },
    {
      minWidth: '100px',
      editRender: { name: 'input' },
      field: 'prepare_skip_type',
      title: '跳过调配类型',
    },
    { title: '操作', slots: { default: 'action' }, fixed: 'right', width: 150 },
  ],
  data: [],
  menuConfig: {
    enabled: true,
    header: {},
    body: {
      options: [
        [
          {
            code: 'copy',
            name: '复制内容（Ctrl+C）',
            prefixConfig: { icon: 'vxe-icon-copy' },
            visible: true,
            disabled: false,
          },
          { code: 'reload', name: '刷新表格', visible: true, disabled: false },
        ],
        [
          {
            code: 'myPrint',
            name: '打印（Ctrl+P）',
            prefixConfig: { icon: 'vxe-icon-print' },
          },
          {
            code: 'myExport',
            name: '导出.csv',
            prefixConfig: { icon: 'vxe-icon-download' },
            visible: true,
            disabled: false,
          },
        ],
      ],
    },
    footer: {},
  },
})

const loading = ref(false)
const clickMe = () => {
  loading.value = true
  setTimeout(() => {
    queryInit()
    loading.value = false
  }, 1000)
}

const dataBack = ref<RowVO[]>([])
function queryInit() {
  // 从接口获取数据
  fetch('https://mock.presstime.cn/mock/66f26d8d0b20e0d6a1d5a491/test/getDrugList', {
    headers: {
      'content-type': 'application/json',
    },
    method: 'GET',
  })
    .then((res) => res.json())
    .then((res) => {
      // 模拟1000条数据
      const tmpData = [...res.result.items]
      for (let index = 0; index < 1000; index++) {
        const obj: Record<string, string> = {}
        const data = res.result.items[0]
        for (const item in data) {
          obj[item] = data[item] ? data[item] + index : index
        }
        tmpData.push(obj)
      }
      dataBack.value = tmpData
      gridOptions.value.data = tmpData
    })
}
queryInit()

const text = ref('')
const search = (str: string) => {
  return setTimeout(() => {
    gridOptions.value.data = dataBack.value.filter((item) => {
      return item.drug_name.includes(str)
    })
  }, 200)
}
watchEffect(() => {
  search(text.value)
})

const gridEvents: VxeGridListeners<RowVO> = {
  // 禁止行编辑
  editDisabled({ row, column }) {
    console.log('禁止编辑', column.field, row)
  },
  // editActivated({ row }) {},
  sortChange({ sortList }) {
    console.info(sortList.map((item) => `${item.field},${item.order}`).join('; '))
  },
  menuClick({ menu, row, column }) {
    console.log('菜单点击', menu.code, row, column)
  },
}
</script>

<style scoped></style>
